<template>
	<view class="space-container kui-flex kui-flex-wrap" :class="(data.direction === 'column' && block) ? 'kui-w-full' : ''" :style="{
		justifyContent: data.justify,
		flexDirection: data.direction,
		alignItems: data.align,
		rowGap: `${data.rowGap}rpx`,
		columnGap: `${data.columnGap}rpx`
	}">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	/**
	 * Space 布局间隔组件
	 * @description 用于快速页面flex布局并设置间距
	 * @property {String} justify = [start/end/center/space-between/space-around/space-evenly]
	 * 	@value start 文档主轴起点对齐
	 * 	@value end 文档主轴终点方向对齐
	 * 	@value center 文档主轴中点对齐
	 * 	@value space-between 文档主轴两端对齐
	 * 	@value space-evenly 文档主轴平均对齐
	 * @property {String} align = [start/end/center/baseline/stretch]
	 * 	@value start 文档侧轴起点对齐
	 * 	@value end 文档侧轴终点对齐
	 * 	@value center 文档侧轴中点对齐
	 * 	@value baseline 文档文字对齐
	 * 	@value stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
	 * @property {String} direction = [row/column]
	 * 	@value row 水平排列
	 * 	@value column 垂直排列
	 * @property {Number} gap 元素间距
	 */
	import {
		defineComponent,
		reactive
	} from 'vue';
	
	const name = 'kui-space';
	
	import SpaceProps from './props';
	
	export default {
		name,
		props: SpaceProps,
		options: {
			// 小程序虚拟节点设置
			virtualHost: true
		},
		setup(props) {
			const data = reactive({
				justify: props.justify == 'end' ? 'flex-end' : props.justify,
				direction: props.direction,
				align: props.align,
				rowGap: props.gap[0] === 0 ? 0 : props.gap[0],
				columnGap: props.gap[1] === 0 ? 0 : props.gap[1]
			});
			
			const init = () => {
				switch (props.align) {
					case 'start':
						data.align = 'flex-start';
						break;
					case 'end':
						data.align = 'flex-end';
						break;
				}
			}
			
			init();
			
			return {
				data
			}
		}
	}
</script>

<style>
	.space-container {
		width: 100%;
		height: 100%;
	}
</style>